<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_drawGeoGraphicObject"></title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="toolbar" class="panel panel-primary" style="  position: absolute;top: 10px;right: 10px;text-align: center;z-index: 9999;border-radius: 4px;">
    <div class='panel-heading' id="panelheading">
        <h5 class='panel-title text-center' data-i18n="resources.title_drawGeoGraphicObject"></h5></div>
    <div class='panel-body content' id="panelbodycontent">
        <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_drawPoint" onclick="draw_dot()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_drawLine" onclick="draw_line()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_drawPolygon" onclick="draw_polygon()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.btn_drawText" onclick="draw_text()"/>
        <input type="button" class="btn btn-default" data-i18n="[value]resources.text_input_value_clear" onclick="clearLayers()"/>
    </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
<script type="text/javascript" include="iclient9-plot-leaflet" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "http://iclsvr.supermap.io";
    var url = host + "/iserver/services/map-china400/rest/maps/China_4326";
    var serverUrl = host + "/iserver/services/plot-jingyong/rest/plot/";
    var map;
    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: [35,104],
        maxZoom: 18,
        zoom: 3
    });
    L.supermap.tiledMapLayer(url).addTo(map);
    var plottingLayer = L.supermap.plotting.plottingLayer("plot", serverUrl);
    plottingLayer.addTo(map);
    var drawControl = L.supermap.plotting.drawControl(plottingLayer);
    drawControl.addTo(map);
    var editControl = L.supermap.plotting.editControl();
    editControl.addTo(map);
    function clearLayers(){
        plottingLayer.removeAllFeatures();
    }
    function draw_dot(){
        clearLayers();
        var latlngs = [new L.latLng(34,105)];
        plottingLayer.createSymbol(421, 10100,latlngs,{symbolType:SuperMap.Plot.SymbolType.DOTSYMBOL,dScale:3});
    }

    function draw_line() {
        clearLayers();
        var latlngs = [];
        latlngs.push(new L.latLng(33,96));
        latlngs.push(new L.latLng(39,102));
        latlngs.push(new L.latLng(29,106));
        latlngs.push(new L.latLng(39,109));
        plottingLayer.createSymbol(0, SuperMap.Plot.SymbolType.POLYLINESYMBOL, latlngs);
    }

    function draw_polygon() {
        clearLayers();
        var latlngs = [];
        latlngs.push(new L.latLng(27,101));
        latlngs.push(new L.latLng(34,97));
        latlngs.push(new L.latLng(41,104));
        latlngs.push(new L.latLng(31,115));
        plottingLayer.createSymbol(0, SuperMap.Plot.SymbolType.ARBITRARYPOLYGONSYMBOL, latlngs);
    }

    function draw_text() {
        clearLayers();
        var latlngs = [new L.latLng(34,105)];
        plottingLayer.createSymbol(0, SuperMap.Plot.SymbolType.TEXTSYMBOL,latlngs,null,{fontSize:30});
    }
    $(document).ready(function(){
        $('#panelheading').click(function(){
            $('#panelbodycontent').toggle();
        });
    });

</script>
</body>
</html>